import React, { useEffect, useState } from 'react'
import { Card, Carousel , Image  } from 'antd';
import {getProgram , getdjbanner , getdjdetail} from '../../api/recommend'

export default function RecommendDj() {
  const [programs,setPrograms] = useState([])
  const [banners,setBanner] = useState([])
  useEffect(() =>{
    getProgram().then(res =>{
      console.log(res.data.programs)
      setPrograms([...res.data.programs])
    })
    getdjbanner().then(res =>{
      setBanner([...res.data.data])
    })
  },[])
  const clickTest = (id) =>{
    console.log(id)
    getdjdetail(336355127).then(res =>{
      console.log(res);
    })
  }
  const { Meta } = Card;
  return (
    <div style={{border: '1px white solid'}}>
    <div style={{height:"301px" , width:"100%" , backgroundColor:'rgba(0,0,0,0.9)',position:"fixed" , zIndex:'999' , paddingLeft:'400px'}}>
    <Carousel 
     dotPosition='left'
     autoplay>
    {
      banners.map((item,index) =>{
        return<div key={index}>
                <Image
              width={770}
              src={item.pic}
            />
        </div>
      })
    }
    </Carousel>
    </div>
    <div style={{marginTop:'310px' }}>
    {
      programs.map(item =>{
        return<Card key={item.coverId} onClick={() =>{clickTest(item.id)}}
            hoverable
            style={{
              width: 300,
              marginLeft:'80px',
              marginBottom:'20px',
              float:'left',
            }}
            cover={<img alt="example" src={item.coverUrl} />}
          >
            <Meta title={item.mainSong.name} description=<div title={item.description} className='programs' style={{height:'20px' , overflow:'hidden'}}>{item.description}</div> />
        </Card>
      })
    }
    </div>
    <div>
    </div>
    </div>
  )
}
